<template>
    <div id="search">
        <el-form :inline="true" v-model="queryParam" class="form-inline">
            <el-form-item label="UUID" property="uuid">
                <el-input v-model="queryParam.uuid" placeholder="通过UUID搜索" clearable />
            </el-form-item>
            <el-form-item label="用户UUID" property="answererUuid">
                <el-input v-model="queryParam.answererUuid" placeholder="通过用户UUID搜索" clearable />
            </el-form-item>
            <el-form-item label="提问UUID" property="askUuid">
                <el-input v-model="queryParam.askUuid" placeholder="通过提问UUID搜索" clearable />
            </el-form-item>
            <el-form-item label="内容" property="content">
                <el-input v-model="queryParam.content" placeholder="通过内容搜索" clearable />
            </el-form-item>
            <el-form-item label="客户端" property="answererClient">
                <el-input v-model="queryParam.answererClient" placeholder="通过客户端搜索" clearable />
            </el-form-item>
            <el-form-item label="主机名" property="answererHostname">
                <el-input v-model="queryParam.answererHostname" placeholder="通过主机名搜索" clearable />
            </el-form-item>
            <el-form-item label="IP地址" property="answererIp">
                <el-input v-model="queryParam.answererIp" placeholder="通过IP搜索" clearable />
            </el-form-item>
            <el-form-item label="时间">
                <div class="block">
                    <el-date-picker type="datetimerange" value-format="YYYY-MM-DD HH:MM:ss"
                        v-model="queryParam.dateTime" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="clean">清空</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-pagination v-model:current-page=queryParam.page v-model:page-size=queryParam.pageSize
                :page-sizes="[5, 10, 20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total=total
                @size-change="query" @current-change="query" />
        </div>
    </div>
    <div id="content">
        <el-table style="width: 100%" :data="answers">
            <el-table-column property="answerTime" label="时间" width="auto" />
            <el-table-column property="uuid" label="UUID" width="auto" />
            <el-table-column property="answererUuid" label="用户UUID" width="auto" />
            <el-table-column property="content" label="内容" width="auto" />
            <el-table-column property="answererIp" label="IP" width="auto" />
            <el-table-column property="answererClient" label="客户端" width="auto">
                <template #default="scope">
                    <el-tag v-if="scope.row.answererClient === null" type="warning">未知</el-tag>
                    <el-tag v-if="scope.row.answererClient === ''" type="warning">未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="answererHostname" label="主机名" width="auto">
                <template #default="scope">
                    <el-tag v-if="scope.row.answererHostname === null" type="warning">未知</el-tag>
                    <el-tag v-if="scope.row.answererHostname === ''" type="warning">未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="auto">
                <template #default="scope">
                    <div>
                        <el-button link type="primary" size="big" @click="getAnswer(scope.row.uuid)">详情</el-button>
                    </div>
                    <div>
                        <el-button link type="primary" size="big" @click="editAnswer(scope.row.uuid)">编辑</el-button>
                    </div>
                    <div>
                        <el-button link type="danger" size="big" @click="deleteAnswer(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div>
        <el-dialog v-model="infoVisible" title="详情" width="50%" draggable>

            <div>
                <el-card style="max-width: 100%">
                    <template #header>
                        <div class="card-header">
                            <el-tag type="success">提问</el-tag>-
                            <el-tag v-if="info.answerState === 'REPLIED'" type="success">已回复</el-tag>
                            <el-tag v-if="info.answerState === 'NO_REPLY'" type="danger">未回复</el-tag>
                        </div>
                    </template>
                    <el-text class="mx-1" type="primary">{{ info.replyEmail }}</el-text>
                    <p>{{ info.content }}</p>
                    <template #footer>{{ info.askTime }}</template>
                </el-card>
                <el-card style="max-width: 100%" v-if="info.answerState === 'REPLIED'">
                    <template #header>
                        <div class="card-header">
                            <el-tag type="warning">回复</el-tag>
                        </div>
                    </template>
                    <p>{{ answer.content }}</p>
                    <template #footer>{{ answer.answerTime }}</template>
                </el-card>
            </div>
            <template #footer="scope">
                <div align="center" class="dialog-footer">
                    <el-button type="primary" @click="infoVisible = false">
                        取消
                    </el-button>
                    <el-button type="warning" @click="editAsk(info.uuid)">
                        编辑
                    </el-button>
                    <el-button type="danger" @click="deleteAsk(this.editInfo)">
                        删除
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="editVisible" title="编辑" width="50%" draggable>

            <div>
                <el-form :model="editInfo" label-width="auto" style="max-width: 600px">
                    <el-form-item label="回复邮箱">
                        <el-input v-model="editInfo.replyEmail" />
                    </el-form-item>
                    <el-form-item label="提问内容">
                        <el-input v-model="editInfo.content" type="textarea" :rows="10" :autoSize="true" />
                    </el-form-item>
                </el-form>
            </div>
            <div align="center" class="dialog-footer">
                <el-button type="success" @click="updateAsk">
                    更新
                </el-button>
                <el-button type="danger" @click="editVisible = false">
                    取消
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAnswers } from '@/api/console/answer';
import { watch } from 'vue';
export default {
    data() {
        return {
            total:0,
            answers: [],
            queryParam: {
                page: 1,
                pageSize: 10,
                uuid: null,
                askUuid: null,
                answererUuid: null,
                content: null,
                askTimeBegin: null,
                askTimeEnd: null,
                answererIp: null,
                answererClient: null,
                answererHostname: null,
                answerState: null,
                dateTime: null,
            },
        }
    },
    methods: {
        query : function () {
            getAnswers(this.queryParam).then(res => {
                this.total = res.data.total
                this.answers = res.data.rows
            })
        },
        clean : function () {
            this.queryParam = {
                page: 1,
                pageSize: 10,
                uuid: null,
                askUuid: null,
                answererUuid: null,
                content: null,
                askTimeBegin: null,
                askTimeEnd: null,
                answererIp: null,
                answererClient: null,
                answererHostname: null,
            }
         }
    },
    mounted() {
        this.query()
    },
}



</script>

<style></style>